<template>
  <div>
    <el-table :data="tableData.content" style="width: 100%">
      <el-table-column label="编码" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px" @click="toLink(scope.row)">{{ scope.row.code }}</span>
        </template>
      </el-table-column>

      <el-table-column label="标题" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后编辑日期" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.madeTime }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isEnable"
            active-text="审批"
            @change="isEnableChange(scope.row.isEnable,scope.row.id)"
          ></el-switch>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @current-change="pageChange(currentPage)"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="prev, pager, next,jumper"
      :total="tableData.totalElements"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //消息
      messageValue: "",
      messageType: "",
      //后台数据
      tableData: [],
      form: {
        //数据对象
        id: "", //id
        username: "", //用户名
        passwd: "", //密码
        isEnable: "", //是否启用
        isAdmin: "", //是否管理员
        dr: "" //是否删除Î
      },
      //分页，页面数
      currentPage: 0
    };
  },
  methods: {
    // 消息弹窗
    message() {
      this.$message({
        showClose: true,
        message: this.messageValue,
        type: this.messageType
      });
    },
    //页面加载时获取用户数据
    getAllArticle(sort) {
      this.$axios({
        method: "get",
        url: "/article/getAllTool",
        params: {
          page: 1,
          size: 10,
          sort: sort
        }
      }).then(successResponse => {
        this.tableData = successResponse.data;
        for (var i = 0; i < 10; i++) {
          if (this.tableData.content[i].isEnable == 0) {
            this.tableData.content[i].isEnable = false;
          } else if (this.tableData.content[i].isEnable == 1) {
            this.tableData.content[i].isEnable = true;
          }
          var dateee = new Date(this.tableData.content[i].madeTime).toJSON();
          var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
            .toISOString()
            .replace(/T/g, " ")
            .replace(/\.[\d]{3}Z/, "");
          this.tableData.content[i].madeTime = date;
        }
      });
    },
    // 页码改变
    pageChange(pageNum) {
      this.$axios({
        method: "get",
        url: "/article/getAllTool",
        params: {
          sort: 0,
          page: pageNum,
          size: 10
        }
      }).then(successResponse => {
        this.tableData = successResponse.data;
        for (var i = 0; i < 10; i++) {
          if (this.tableData.content[i].isEnable == 0) {
            this.tableData.content[i].isEnable = false;
          } else if (this.tableData.content[i].isEnable == 1) {
            this.tableData.content[i].isEnable = true;
          }
          var dateee = new Date(this.tableData.content[i].madeTime).toJSON();
          var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
            .toISOString()
            .replace(/T/g, " ")
            .replace(/\.[\d]{3}Z/, "");
          this.tableData.content[i].madeTime = date;
        }
      });
    },
    // 改变是否审批
    isEnableChange(isEnable, id) {
      this.$axios({
        method: "get",
        url: "/article/setIsEnable",
        params: { isEnable: isEnable, id: id }
      }).then(successResponse => {
        if (successResponse.data == "success") {
          this.messageValue = "成功";
          this.messageType = "success";
          this.message();
        } else {
          this.messageValue = "失败";
          this.messageType = "error";
          this.message();
        }
        this.pageChange(this.currentPage); //更新页面
      });
    },
    // 编辑按钮操作
    handleEdit(index, row) {
      let data = JSON.stringify(row);
      this.$router.push({
        path: "/editArticle",
        query: { data: data }
      });
    },
    // 删除账户
    handleDelete(index, row) {
      //保存内容
      this.$axios({
        method: "get",
        url: "/article/deleteArticle",
        params: { id: row.id }
      }).then(successResponse => {
        if (successResponse.data == "success") {
          this.messageValue = "成功";
          this.messageType = "success";
          this.message();
        } else {
          this.messageValue = "失败";
          this.messageType = "error";
          this.message();
        }
        this.pageChange(this.currentPage); //更新页面
      });
    },
    toLink(row) {
      let article = JSON.stringify(row);
      this.$router.push({ path: "/articleDetail", query: { data: article } });
    }
  },
  created() {
    this.getAllArticle(0);
  }
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #ffffff;
  color: #333;
  /* text-align: right; */
  /* margin-right: 20%; */
  line-height: 60px;
}
.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>
